<template>
  <div class="content">
    <div ref="charts" style="width: 1000px; height: 800px"></div>
  </div>
</template>


<script>
import * as echarts from "echarts";
import zhongguo from "@/assets/love.json"
import beijing from "@/assets/beijin.json";
export default {
  created() {
    this.$nextTick(() => {
      this.initCharts();
    })
  },
  methods: {
    initCharts() {
      let data = [
        { name: "房山区", value: [115.8, 39.6, 11, 80] },
        { name: "顺义区", value: [116.6, 40.13, 447, 499] },
        { name: "朝阳区", value: [116.4, 40, 1397, 16] },
        { name: "通州区", value: [116.7, 39.92, 447, 200] },
        { name: "西城区", value: [116.35, 39.9, 254, 9000] },
        { name: "丰台区", value: [116.2, 39.85, 245, 10001] },
        { name: "东城区", value: [116.42, 39.9, 214, 989] },
        { name: "昌平区", value: [116.2, 40.22, 206, 320] },
        { name: "大兴区", value: [116.3, 39.73, 203, 22] },
        { name: "海淀区", value: [116.25, 39.95, 153, 292] },
        { name: "平谷区", value: [117.05, 40.13, 74, 110] },
        { name: "石景山区", value: [116.18, 39.9, 70, 290] },
        { name: "门头沟区", value: [115.55, 39.93, 51, 780] },
        { name: "怀柔区", value: [116.6, 40.32, 30, 410] },
        { name: "密云区", value: [116.8, 40.37, 15, 1] },
        { name: "延庆区", value: [115.9, 40.45, 14, 2288] },
      ]
      const charts = echarts.init(this.$refs["charts"]);
      // ...
      // 注意这里是echarts的实例对象，而不是echarts组件本身。
      charts.on('click', ({ name }) => {
        if (name === "北京市") {
          // 修改option的配置，可以继续自定义
          option.geo.zoom = 0.8
          // 就像上面提到的，这里必须要和注册地图时的名字一致
          option.geo.map = "beijing"
          // 注册地图
          echarts.registerMap("beijing", beijing)
          // 重新渲染
          charts.setOption(option, true)
        }
      })
      const option = {
        visualMap: [
          {
            type: 'piecewise',
            pieces: [
              { min: 401, max: 1000000, label: '大于400人', color: 'red' },
              { min: 301, max: 400, label: '确诊301-400人', color: 'orange' },
              { min: 201, max: 300, label: '确诊201-300人', color: 'yellow' },
              { min: 101, max: 200, label: '确诊101-200人', color: 'blue' },
              { min: 1, max: 100, label: '确诊1-100人', color: 'green' },
            ],
            color: ['red', 'orange', 'yellow', 'blue', 'green'],
            x: '-1000 px', // 图例横轴位置
            y: '-1000 px', // 图例纵轴位置
            seriesIndex: 0, // 指定系列数据
          }
        ],
        // 背景颜色
        backgroundColor: "#404a59",
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          backgroundColor: "#0C121C",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "12",
            width: 20,
            height: 30,
            overflow: "break",
          },
          showDelay: 100,
          formatter(params) {
            return `地区：${params.name}</br>数值：${params.value[2]}人<br/>感染新增${params.value[3]}`;
          }
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin",
            legendHoverLink: true,
            symbolSize: [60, 60],
            // 这里渲染标志里的内容以及样式
            label: {
              show: true,
              formatter(value) {
                return value.data.value[2];
              },
              color: "#fff",
            },
            // 标志的样式
            itemStyle: {
              normal: {
                color: "rgba(255,0,0,.7)",
                shadowBlur: 2,
                shadowColor: "D8BC37",
              },
            },
            // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
            // 至于如何展示，完全是靠上面的formatter来自己定义的
            data: data,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            zlevel: 1,
          }, 
          {
            type: "map",
            geoIndex: 0,
            data: data,
          }
        ],

        // 地图配置
        geo: {
          map: "china",
          roam:true,
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },

          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
        },
        graphic: {
          // 水印类型
          type: 'text',
          // 相对于容器的位置
          left: '10%',
          top: '10%',
          // 样式设置
          style: {
            // 文本内容
            text: "小小的地图，大大的奇迹",
            // 字体粗细、大小、字体
            font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
            // 字体颜色
            fill: "#fff"
          }
        }
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("china", zhongguo)

      charts.setOption(option);
    },
  },
};
</script>

